<template>
    <div>
        <el-form style="padding: 20px;padding-bottom: 0;" ref="form" :rules="rules" :model="docForm" label-width="130px">
            <el-form-item label="名称" prop="name">
                <el-input style="width: 520px;" v-model="docForm.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="描述" prop="content">
  <el-input style="width: 520px;" type="textarea" v-model="docForm.content"></el-input>
</el-form-item> -->
            <el-form-item label="所属目录" prop="dirId">
                <div style=" width:520px;display:flex;justify-content: space-between;">
                    <selectdir style="width:440px" ref="selectdir" :parentProjId="docForm.dirId" @dirparenIdtchange='dirparenIdtchange' dirType='05'></selectdir>
                    <el-button type="primary" @click="catalogue">新增</el-button>
                </div>
            </el-form-item>
            <el-form-item label="附件" prop="docFilePath">
                <div v-for="item in docForm.docFilePath" v-if="docForm.docFilePath.length > 0" style="font-size: 16px;margin-bottom: 5px;color: #333333;" @click.stop="">{{ item.fileName }}
                </div>
                <singlefileUpload style="width: 100px" ref="upload" :ruleFormdocFilePath='docForm.docFilePath' @uploadListDel="uploadListDel" @uploadSave="uploadSave" @returnUrl="returnUrl" @uploadListShow="uploadListShow">
                    <template v-slot:openDialog>
                        <div style="display: flex;flex-direction: column;">
                            <el-button style="width: 100px;" plain>上传附件</el-button>
                        </div>
                    </template>
                </singlefileUpload>
            </el-form-item>
            <el-form-item label="关联项目">
                <el-select v-model="projName" multiple filterable :filter-method="filterChoose" value-key="projId" placeholder="请选择项目" @change="projChoose" style="width: 520px">
                    <el-option v-for="item in projectList" :key="item.projId" :label="item.name" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联任务">
                <!-- <doctask :taskproject='taskproject' style="width: 520px" @selectsuccess='selectsuccess'></doctask> -->
                <selectTask :taskproject='docForm.docTypeId' style="width: 520px" @parenIdtchange='parenIdtchange'></selectTask>
            </el-form-item>
            <!--            <el-form-item label="表单模板" prop="formKey">-->
            <!--                <el-select style="width:520px" v-model="manageName" filterable :filter-method="remoteMethodManage" clearable placeholder="请选择表单模板" value-key="formKey" @change="manageClick">-->
            <!--                    <el-option v-for="item in manage" :key="item.formKey" :label="item.formName" :value="item">-->
            <!--                    </el-option>-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item label="是否审批">
                <el-switch v-model="switchType" @change="switchClick" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="流程表单" prop="modelId" v-if="switchType == true">
                <el-select style="width:520px" v-model="processName" filterable :filter-method="remoteMethodProcess" clearable placeholder="请选择流程表单" value-key="id" @change="processClick">
                    <el-option v-for="item in process" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <parser v-if="formData" style="width:50%;margin-left:25px" :form-conf="formData" ref="parser" @submit="submit" />
        </el-form>
        <el-button type="primary" style="margin-left: 150px;" @click="onSubmit('form','1')">保存</el-button>
        <el-button v-if="switchType == true" type="primary" style="margin-left: 20px;" @click="startClick('form','2')">
            保存并审核
        </el-button>
        <el-button style="margin-left: 20px;" @click="cencel">取消</el-button>
        <!-- 上传列表 -->
        <!-- <uploadList style="z-index: 99999;" v-if="uploadForm.length > 0 && uploadListType == true" :uploadForm="uploadForm" @uploadListDel="uploadListDel"></uploadList> -->
        <folder ref="folder" :dirType='docForm.docType' @dirgetTreeDataclick='dirgetTreeDataclick'></folder>
    </div>
</template>

<script>
import selectdir from "@/components/projectComponents/selectdir";
import singlefileUpload from "@/components/upload/singlefileUpload";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { getAction as manageGetAction } from "@/api/manage";
import Parser from "@/components/FormGenerator/components/parser";
import { save, queryId, processStart } from "@/api/doc.js";
import uploadList from "@/components/upload/uploadList.vue";
import { list } from "@/api/project";
// import doctask from "@/components/screen/doctask";
import selectTask from "@/components/projectComponents/selectTask";
import folder from "./components/folder";

export default {
    name: "ContractAdd",
    data() {
        return {
            conteractType: "05",
            taskproject: [],
            projectList: [],
            projName: "",
            listQuery: {
                current: 1,
                size: 20,
                name: "",
            },
            docForm: {
                name: "",
                content: "",
                docFilePath: [],
                modelId: "",
                formKey: "",
                formData: "",
                status: "00",
                docType: "05",
                dirId: "",
                taskMeet: "",
                docTypeId: "",
            },
            process: [],
            processName: "",
            manage: [],
            manageName: "",
            formData: "",
            uploadListType: false,
            uploadForm: [],
            switchType: true,
            processLoading: false,
            contractType: "1",
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入文档名称",
                        trigger: "blur",
                    },
                ],
                content: [
                    {
                        required: true,
                        message: "请输入文档描述",
                        trigger: "blur",
                    },
                ],
                docFilePath: [
                    {
                        required: true,
                        message: "附件不能为空",
                        trigger: "blur",
                    },
                ],
                modelId: [
                    {
                        required: true,
                        message: "请选择关联流程",
                        trigger: "blur",
                    },
                ],
                formKey: [
                    {
                        required: true,
                        message: "请选择关联表单",
                        trigger: "blur",
                    },
                ],
                dirId: [
                    {
                        required: true,
                        message: "请选择目录",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        singlefileUpload,
        Parser,
        uploadList,
        selectdir,
        folder,
        selectTask,
    },
    created() {
        var queryData = JSON.parse(this.$route.query.data);
        console.log(
            "99999999999999999999999999999666666666666666666666666666666"
        );
        console.log(queryData);
        if (queryData.docType) {
            console.log(queryData);
            this.docForm.docType = queryData.docType;
        }
        if (queryData.dirId) {
            this.docForm.dirId = queryData.dirId;
        }
        if (queryData.conteractType) {
            this.conteractType = queryData.conteractType;
        }
        this.processList();
        // this.manageList();
        this.listclick();
    },
    methods: {
        parenIdtchange(data) {
            this.docForm.taskMeet = data;
        },
        catalogue() {
            this.$refs.folder.loadFolder();
        },
        dirgetTreeDataclick() {
            this.$refs.selectdir.dirgetTreeDataclick();
        },
        filterChoose(data) {
            var _this = this;
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                _this.listQuery.name = data;
                _this.listclick();
            }, 500);
        },
        projChoose(data) {
            this.taskproject = data;
            this.taskproject.forEach((item) => {
                this.$set(item, "type", false);
            });
            let projIdArray = [];
            data.forEach((item) => {
                projIdArray.push(item.projId);
            });
            this.docForm.docTypeId = projIdArray.toString();
        },
        listclick() {
            list(this.listQuery, false).then((res) => {
                this.projectList = res.data.records;
            });
        },
        dirparenIdtchange(data) {
            this.docForm.dirId = data;
            this.$EventBus.$emit("dircontChange", this.docForm.dirId);
        },
        onSubmit(formName, type) {
            var _this = this;
            _this.contractType = type;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (_this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        // if (!_this.docForm.modelId) {
                        //     _this.$message.error("请选择审批流程");
                        //     return;
                        // }
                        save(_this.docForm).then((res) => {
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$router.push({
                                        path: "/contract/index",
                                    });
                                }); // 关闭当前tab回到列表
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cencel() {
            var _this = this;
            _this.$store
                .dispatch("tagsView/delView", _this.$route)
                .then(({ visitedViews }) => {
                    _this.$router.push({
                        path: "/contract/index",
                    });
                }); // 关闭当前tab回到列表
        },
        startClick(docForm, type) {
            var _this = this;
            _this.contractType = type;
            console.log("我进来了保存并发布");
            this.$refs[docForm].validate((valid) => {
                if (valid) {
                    // if(utils.isNull(this.docForm.modelId)){ _this.$message.error('请选择审批流程');return;}
                    if (this.formData) {
                        _this.$refs.parser.submitForm();
                    } else {
                        save(_this.docForm).then((res) => {
                            processStart({
                                docId: res.data.docId,
                            }).then(({ msg }) => {
                                _this.$store
                                    .dispatch("tagsView/delView", _this.$route)
                                    .then(({ visitedViews }) => {
                                        _this.$router.push({
                                            path: "/contract/index",
                                        });
                                    }); // 关闭当前tab回到列表
                            });
                        });
                    }
                }
            });
        },
        submit(data) {
            var _this = this;
            this.docForm.formData = JSON.stringify(data);
            if (_this.contractType == "1") {
                save(_this.docForm).then((res) => {
                    _this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            _this.$router.push({
                                path: "/contract/index",
                            });
                        }); // 关闭当前tab回到列表
                });
            } else {
                if (!_this.docForm.modelId) {
                    _this.$message.error("请选择审批流程");
                    return;
                }
                save(_this.docForm).then((res) => {
                    processStart({
                        docId: res.data.docId,
                    }).then(({ msg }) => {
                        _this.$store
                            .dispatch("tagsView/delView", _this.$route)
                            .then(({ visitedViews }) => {
                                _this.$router.push({
                                    path: "/contract/index",
                                });
                            }); // 关闭当前tab回到列表
                    });
                });
            }
        },
        processList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/processDefinition/list",
                {
                    processDefinitionName: name,
                },
                false
            ).then((res) => {
                const { data } = res;
                data.records.forEach((item) => {
                    if (item.category == "HT") {
                        this.process.push(item);
                    }
                });
            });
        },
        processClick(data) {
            console.log(data);
            var _this = this;
            this.processName = data.name;
            this.docForm.modelId = data.id;
            this.docForm.formKey = data.key;
            this.formData=''
            if (data.key) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.key,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }else{
               _this.formData =""
            }
        },
        remoteMethodProcess(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.processList(data);
            }, 500);
        },
        manageList(val) {
            var _this = this;
            var name = "";
            if (val) {
                name = val;
            } else {
                name: "";
            }
            getAction(
                "/flowable/form/list",
                {
                    formName: name,
                    current: 1,
                    size: 10,
                },
                false
            ).then((res) => {
                const { data } = res;
                this.manage = data.records;
            });
        },
        manageClick(data) {
            console.log(data);
            var _this = this;
            this.manageName = data.formName;
            this.docForm.formKey = data.formKey;
            this.formData = data.formJson;
            if (data.formKey) {
                getAction(
                    "/flowable/form/queryById",
                    {
                        id: data.formKey,
                    },
                    false
                ).then(({ data }) => {
                    if (data.formJson) {
                        _this.formData = JSON.parse(data.formJson);
                    }
                });
            }
        },
        remoteMethodManage(data) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.manageList(data);
            }, 500);
        },
        // 上传附件
        uploadSave(val) {
            let _this = this;
            _this.docForm.docFilePath = _this.uploadForm;
            console.log(_this.docForm.docFilePath);
            _this.$refs.upload.sucessClick();
        },
        uploadListShow(data) {
            this.uploadForm = this.docForm.docFilePath;
            this.uploadListType = data;
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        uploadListDel(data) {
            this.uploadForm.splice(data, 1);
        },
        switchClick(data) {
            if (data == false) {
                this.processName = "";
                this.docForm.modelId = "";
                this.docForm.formKey = "";
                this.formData = "";
            }
        },
    },
};
</script>
